<template>
    <h1>pinia</h1>
    <h2>数字：{{ num }}</h2>
    <h2>对象：{{ obj2}}</h2>
    <h2>getters：{{ numTwo }}</h2>
    <h2>getters：{{ numThree }}</h2>
    <button @click="add">增加</button>
    <button @click="sub">减少</button>
    <button @click="change">修改</button>

</template>

<script setup lang='ts'>
import {unref,computed} from "vue";
import {useStore} from "./../store/useStore";
import {storeToRefs} from "pinia";

const getStore=useStore();
console.log(getStore);


// 解构出来的简单数据类型不是响应式的
// 因为简单数据类型被解构的时候，是把值直接赋值给了另一个变量，
// 因此在pinia里面数据发生改变，就做不到响应式
// 但是引用数据类型被解构的时候，是把地址赋值给另一个变量，地址相同，指向的数据相同
// 因此在pinia里面复杂数据类型发生改变的时候，数据依然是响应式的

const {add,sub,change}=useStore();


// 把解构出来的数据变成响应式数据

// 方法一：storeToRefs:把数据改成响应式数据（推荐）
// 注意：方法不能再这里进行解构，需要单独解构
const {num,obj,numTwo,numThree}=storeToRefs(useStore());
let obj2=unref(obj);

// 方法二：使用computed计算属性，再包一层
// const num=computed(()=>{
//     return useStore().num;
// })


</script>

<style scoped>

</style>
